<template>
	<view class="withdraw clearfix ">
		<cu-custom bgColor="bg-white " isBack>
			<block slot="content">添加银行卡</block>
		</cu-custom>
		<form class="block  clearfix mt5">
			<evan-form hide-required-asterisk ref="form" :model="form">
				<view class="flex flex-direction bg-white  px15">
					<view class="tree-title mt20">卡号</view>
					<view class="mt5">
						
						<evan-form-item prop="bankNumber ">
							<input :maxlength="30" class="f14 wp100 " placeholder-class="text-info" placeholder="请输入银行卡卡号" name="bankNumber" v-model.trim="form.bankNumber" />
						</evan-form-item>
					</view>
				</view>
				<view class="flex flex-direction bg-white  px15">
					<view class="tree-title mt20">所属银行</view>
					<view class="mt5">
						<evan-form-item prop="bankName">
							<input :maxlength="30" class="f14 wp100 " placeholder-class="text-info" placeholder="如建设银行" name="bankName" v-model.trim="form.bankName" />
						</evan-form-item>
					</view>
				</view>
				<view class="flex flex-direction bg-white  px15">
					<view class="tree-title mt20">开户行</view>
					<view class="mt5">
						<evan-form-item prop="kaihang">
							<input :maxlength="30" class="f14 wp100 " placeholder-class="text-info" placeholder="开户行 " name="kaihang" v-model.trim="form.kaihang" />
						</evan-form-item>
					</view>
				</view>
				<view class="flex flex-direction bg-white  px15">
					<view class="tree-title mt20">开户名</view>
					<view class="mt5">
						<evan-form-item prop="kaiming">
							<input :maxlength="30" class="f14 wp100 " placeholder-class="text-info" placeholder="请输入开户名 " name="kaiming" v-model.trim="form.kaiming" />
						</evan-form-item>
					</view>
				</view>
			</evan-form>
			<view class="mt40 px15">
				<button :disabled="isLoading" @click="formValidate" type class="mt20  button-red text-white">
					<text v-if="isLoading" class="cuIcon-loading2 cuIconfont-spin margin-right-sm"></text>
					确认添加
				</button>
			</view>
		</form>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			form:{
				bankName:'',
				kaihang:'',
				bankNumber:'',
				kaiming:''
			},
			
		}
	},
	computed: {
		rules() {
			return {
				bankNumber: [{ required: true, message: '请输入银行卡卡号'}],
				bankName: [{ required: true, message: '请输入所属银行'}],
				kaihang: [{ required: true, message: '请输入开户行' }],
				kaiming: [{ required: true, message: '请输入开户名' }],
			}
		}
	},
	methods: {
		async formSubmit(e) {
			let params={
				bankNumbet:this.form.bankNumber,
				bankName:this.form.bankName,
				bankAddr:this.form.kaihang,
				kName:this.form.kaiming
			}
			let {data} = await this.$http.post('user.bankadd', params, { tipConfig: { storeLoading: true, isSuccessTip: true, isSuccessBack: true, navigateBack: 1 } })
		},
	}
}
</script>

<style lang="less">
	.bb1{
		border-bottom: 0.5px solid #01404A !important;
	}
	.h55{
		height: 110rpx;
	}
	.pd0{
		padding: 0 !important;
	}
	.button-dangers{
		background-color: #FE4725 !important;
		height: 92rpx;
	}
	.border-dangers{
		border: 0.5px solid #FE4725 !important;
		border-radius: 30rpx;
	}
	.block-ps{
		width: 34rpx;
		height: 40rpx;
	}
</style>
